<template>
	<view>
		<view>
			<view>可随意拖动</view>
			<view class="page-body">
				<view class="page-section page-section-gap">
					<map 
						@tap="tap" 
						@regionchange="regionchange" 
						@updated="updated"
						@controltap="controltap"
						class="map" 
						:scale="scale" 
						style="width: 100%;" 
						:latitude="latitude" 
						:longitude="longitude" 
						:markers="covers">
						
						</map></view>
			</view>
			<view>{{showMap}}</view>
			<view style="margin-top: 40rpx;">监听视野变化</view>
			<view>{{longitude}}</view>
			<view>{{latitude}}</view>
		</view>
	</view>
</template>

<script>
// , 东经104.06, 北纬30.67
export default {
	data() {
		return {
			userName: '',
			id: 0, // 使用 marker点击事件 需要填写id
			title: 'map',
			latitude: 30.5689,
			longitude: 104.0642,
			scale:16,
			covers: [
				{
					latitude: 30.5689,
					longitude: 104.0642,
					iconPath: require('@/static/mapfill.png')
				},
				// {
				// 	latitude: 30.67,
				// 	longitude:104.063,
				// 	iconPath: require('@/static/logo.png')
				// }
			],
			showMap:'',
		};
	},
	onShow() {},
	computed: {
	},
	methods: {
		regionchange(e){
			console.log('视野变化',e);
			if(e.type=="end"){
				this.longitude = e.detail.centerLocation.longitude
				this.latitude = e.detail.centerLocation.latitude
			}
		},
		tap(e){
			console.log('点击了地图',e);
		},
		updated(){
			this.showMap = '监听地图渲染更新完成'
			console.log('地图渲染更新完成时');
		},
		controltap(e){
			console.log('点击控件时触发',e);
		}
	}
};
</script>

<style lang="scss">
.map {
	height: 600rpx;
}
</style>
